<template>
    <Header></Header>
    <div class='course-filter'>
        <div class="filter-main">
            <div class='filter-item'>
                <div class='item-title'>课程方向：</div>
                <ul>
                    <li class='filter-all'>全部</li>
                    <li v-for="item in FirseList" :key="item.id" @click="evtFirst(item.id)"
                        :class='currentId == item.id ? "filter-all" : ""'>{{ item.categoryName }}</li>

                </ul>
            </div>
            <div class='filter-item'>
                <div class='item-title'>课程分类：</div>
                <ul>
                    <li class='filter-all'>全部</li>
                    <li v-for="item in SecondList" :key="item.id" @click="evtSecond(item.id)"
                        :class='currentId == item.id ? "filter-all" : ""'>{{ item.categoryName }}
                    </li>

                </ul>
            </div>
            <div class='filter-item'>
                <div class='item-title'>课程难度：</div>
                <ul>
                    <li class='filter-all'>全部</li>

                    <li v-for="item in levelList" :key="item.id" @click="evtLevel(item.id)"
                        :class='currentId == item.id ? "filter-all" : ""'>
                        {{ item.name }}
                    </li>


                </ul>
            </div>
        </div>
    </div>
    <div class='course-list'>
        <div class='list-main'>
            <div class='list-t'>
                <ul>
                    <li>综合</li>
                    <li>|</li>
                    <li>最新课程</li>
                    <li>|</li>
                    <li>最多购买</li>
                    <li>|</li>
                    <li>
                        <span>价格</span>
                        <div class='caret'>
                            <el-icon :size='8'>
                                <CaretTop />
                            </el-icon>
                            <el-icon :size='8'>
                                <CaretBottom />
                            </el-icon>
                        </div>
                    </li>
                </ul>
                <div>
                    <el-checkbox label="免费课程" />
                    <el-checkbox label="会员免费课程" />
                </div>
            </div>
            <ul class='list-c'>
                <li v-for="item in CourseList" :key="item.id" @click="goDetail(item.id)">
                    <img :src="item.courseCover" />
                    <div class='course-content'>
                        <h3>{{ item.courseName }}</h3>
                        <div>{{ courseTypeFn(item.courseLevel) }} · {{ item.clicks }}</div>
                        <div class='price'>
                            <div class='price-vip'>会员专享</div>
                            <div class='price-total'>¥ 299</div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class='list-b'>
                <el-pagination background layout="prev, pager, next" :total="CourseTotal"
                    @current-change="currentChange" />
            </div>
        </div>
    </div>
    <Footer></Footer>
</template>



<script setup>
// 引入头组件
import Header from '@/components/common/Header.vue';
// 引入底部组件
import Footer from '@/components/Home/Footer.vue';
//element
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'

import { getFirstCategorys, getSecondCategorys, courseSearch } from '@/utils/api/Course'

// 引入混入（mixin）文件判断等级
import courseType from '@/mixin/CourseType'
let { courseTypeFn } = courseType();


// 接参对象 一级分类
let FirseList = ref([])
// 二级分类
let SecondList = ref([])
// 课程
let CourseList = ref([])

// 课程总数
let CourseTotal = ref(0);

// 课程难度
let levelList = ref([
    { name: '初级', id: 1 },
    { name: '中级', id: 2 },
    { name: '高级', id: 3 },
]);

//切换class
let currentId = ref(null);



// 此生命周期 有data，没有el(其实已经在准备了)
onBeforeMount(() => {
    // 获取一级分类
    getFirstCategorys().then(res => {
        FirseList.value = res.data.data.list
    })

    // 获取二级分类
    SecondCategorys({
        categoryId: '91a214716c1949278d94b44ef0a07822'
    })

    // 最终 查询课程
    CourseSearch(courseParams)


})

// 获取二级分类
const SecondCategorys = (params) => {
    // console.log(params)
    getSecondCategorys(params).then(res => {
        SecondList.value = res.data.data.list
    })
}

// 查询课程
const CourseSearch = (params) => {
    courseSearch(params).then(res => {
        CourseList.value = res.data.data.pageInfo
            .list
        CourseTotal.value = res.data.data.pageInfo.total
    })
}


// 查询课程的参数
let courseParams = reactive({
    pageNum: 1,
    pageSize: 8,
    entity: {
        firstCategory: '',
        secondCategory: '',
        courseLevel: ''
    }
})

// 点击一级分类
const evtFirst = (id) => {
    // console.log(id)
    currentId.value = id

    // 获取二级分类
    SecondCategorys({
        categoryId: id
    })

    // 查询课程
    courseParams.entity.firstCategory = id

    // 点击一级 清空二级、以及课程等级
    courseParams.entity.secondCategory = ''
    courseParams.entity.courseLevel = ''

    CourseSearch(courseParams)


}

// 点击二级分类
const evtSecond = (id) => {
    currentId.value = id

    console.log(id)

    // 查询课程
    courseParams.entity.secondCategory = id
    courseParams.entity.courseLevel = ''
    CourseSearch(courseParams)

}

// 点击课程难度
const evtLevel = (id) => {
    currentId.value = id


    // 查询课程
    courseParams.entity.courseLevel = id
    CourseSearch(courseParams)
    console.log(courseParams)

}

// 分页
const currentChange = (val) => {
    courseParams.pageNum = val
    CourseSearch(courseParams)

}

// 点击路由函数 跳转到课程详情页
let router = useRouter();

// 接收当前视频id
const goDetail = (id) => {
    router.push({
        path: '/course/detail',
        query: {
            id
        }
    })
}




</script>





<style scoped>
.course-filter {
    width: 100%;
    height: 197px;
    background: #F3F5F9;
}

.filter-main {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1000px;
    height: 197px;
    margin: 0 auto;
}

.filter-item {
    display: flex;
    align-items: center;
}

.item-title {
    margin-left: 20px;
    font-size: 14px;
    font-weight: bold;
    color: #333333;
}

.filter-item ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.filter-item ul li {
    padding: 0 3px;
    margin-right: 30px;
    font-size: 14px;
    font-weight: 400;
    color: #515759;
    cursor: pointer;
}

.filter-item ul li.filter-all {
    line-height: 30px;
    text-align: center;
    color: #388fff;
    font-size: 14px;
    background: rgba(44, 128, 255, .1);
    border-radius: 5px;
}

.course-list {
    padding: 50px 0;
    background: #fff;
}

.list-main {
    width: 1000px;
    margin: 0 auto;
}

.list-t {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.list-t ul {
    display: flex;
}

.list-t ul li {
    display: flex;
    align-items: center;
    margin-right: 16px;
    font-size: 14px;
    font-weight: 400;
    color: #515759;
}

.caret {
    display: flex;
    flex-direction: column;
}

.list-c {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.list-c li {
    float: left;
    margin-top: 38px;
    width: 240px;
    height: 275px;
    background: #FFFFFF;
    box-shadow: 1px 3px 3px rgba(27, 39, 94, 0.1);
    border-radius: 5px;
}

.list-c li:last-child:nth-child(4n + 2) {
    margin-right: calc((100% - 240px) / 3 * 2)
}

.list-c li:last-child:nth-child(4n + 3) {
    margin-right: calc((100% - 240px) / 3 * 1)
}

.list-c li img {
    width: 240px;
    height: 153px;
}

.course-content {
    padding: 7px 16px;
}

.course-content h3 {
    font-size: 12px;
    color: #333333;
}

.course-content>div {
    padding: 7px 0;
    font-size: 12px;
    color: #808080;
}

.price {
    display: flex;
}

.price-vip {
    width: 64px;
    height: 16px;
    margin-right: 3px;
    text-align: center;
    color: #fff;
    background: linear-gradient(90deg, #FF928E 0%, #FE7062 99%);
    border-radius: 16px 0px 16px 0px;
}

.price-total {
    font-size: 12px;
    color: #FF727F;
}

.list-b {
    padding-top: 50px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>